---
category: Level 1 — Basic
created: '2020-02-17'
keywords:
title: Set CSS style for an element
---

## Set a CSS style

Setting the style via the `style` property:

```js
ele.style.backgroundColor = 'red';
ele.style['backgroundColor'] = 'red';
ele.style['background-color'] = 'red';
```

Multiple styles can be set at the same time by overwriting or updating the `cssText` property:

```js
// Add new style
el.style.cssText += 'background-color: red; color: white';

// Ignore previous styles
el.style.cssText = 'background-color: red; color: white';
```

## Remove a CSS style

```js
ele.style.removeProperty('background-color');

// Does NOT work
ele.style.removeProperty('backgroundColor');
```

## See also

-   [Create a range slider](https://phuoc.ng/collection/html-dom/create-a-range-slider/)
-   [Create an image comparison slider](https://phuoc.ng/collection/html-dom/create-an-image-comparison-slider/)
-   [Create resizable split views](https://phuoc.ng/collection/html-dom/create-resizable-split-views/)
-   [Drag and drop element in a list](https://phuoc.ng/collection/html-dom/drag-and-drop-element-in-a-list/)
-   [Drag and drop table column](https://phuoc.ng/collection/html-dom/drag-and-drop-table-column/)
-   [Drag and drop table row](https://phuoc.ng/collection/html-dom/drag-and-drop-table-row/)
-   [Drag to scroll](https://phuoc.ng/collection/html-dom/drag-to-scroll/)
-   [Get css styles of an element](https://phuoc.ng/collection/html-dom/get-css-styles-of-an-element/)
-   [Make a draggable element](https://phuoc.ng/collection/html-dom/make-a-draggable-element/)
-   [Make a resizable element](https://phuoc.ng/collection/html-dom/make-a-resizable-element/)
-   [Measure the width of given text of given font](https://phuoc.ng/collection/html-dom/measure-the-width-of-given-text-of-given-font/)
-   [Prevent body from scrolling when opening a modal](https://phuoc.ng/collection/html-dom/prevent-body-from-scrolling-when-opening-a-modal/)
-   [Print an image](https://phuoc.ng/collection/html-dom/print-an-image/)
-   [Resize columns of a table](https://phuoc.ng/collection/html-dom/resize-columns-of-a-table/)
-   [Resize the width of a text box to fit its content automatically](https://phuoc.ng/collection/html-dom/resize-the-width-of-a-text-box-to-fit-its-content-automatically/)
-   [Scale a text to fit inside of an element](https://phuoc.ng/collection/html-dom/scale-a-text-to-fit-inside-of-an-element/)
-   [Show a custom context menu at clicked position](https://phuoc.ng/collection/html-dom/show-a-custom-context-menu-at-clicked-position/)
-   [Show a loading indicator when an iframe is being loaded](https://phuoc.ng/collection/html-dom/show-a-loading-indicator-when-an-iframe-is-being-loaded/)
-   [Show or hide an element](https://phuoc.ng/collection/html-dom/show-or-hide-an-element/)
-   [Toggle an element](https://phuoc.ng/collection/html-dom/toggle-an-element/)
-   [Zoom an image](https://phuoc.ng/collection/html-dom/zoom-an-image/)
